$(function(){	
var index = $('.active').index();
function back (){
    
    $('.step').animate({width: '100%'}, 5000,function(){
        if(index<2){
            index++
        }else{
            index=0;
        }
        change (index)
        $('.step').animate({width: 0},back())
    })
}
function next (){
    if(index<2){
        index++
    }else{
        index=0;
    }
    change (index)
}
function prev(){
    if(index>0){
        index--
    }else{
        index=2;
    }
    change (index)
}
function auto(){
    var width = $('.img').width()/3;
    for(var i = 0;i<3;i++){
        $('.img span:nth-child('+(i+1)+')').each(function(j){
            $(this).css("backgroundPosition",-width*j);
        })
    }
}
auto()
back ()
click ()
$('.lfArrow').click(function(){
    prev()
})
$('.riArrow').click(function(){
    next()
})
$(window).on('resize',function(){
        auto()
    })
function change (index){
    $('em').eq(index).addClass('active').siblings('em').removeClass('active')
    $('.img div').children('span').addClass('active').removeClass('clear')
    $('.img div').eq(0).children('span').eq(index).addClass('clear').removeClass('active')
    $('.img div').eq(1).children('span').eq(index).addClass('clear').removeClass('active')
    $('.img div').eq(2).children('span').eq(index).addClass('clear').removeClass('active')
}
// 点击dot事件
function click (){
    $('em').on('click',function(){
        var i = $(this).index()
        index=i;
        change (index)
        back ()

        // $('em').eq($(this).index()).addClass('active').siblings('em').removeClass('active')
        // $(this).addClass('active').siblings('em').removeClass('active')
        // $('.img div').children('span').addClass('active').removeClass('clear')
        // $('.img div').eq(0).children('span').eq($(this).index()).addClass('clear').removeClass('active')
        // $('.img div').eq(1).children('span').eq($(this).index()).addClass('clear').removeClass('active')
        // $('.img div').eq(2).children('span').eq($(this).index()).addClass('clear').removeClass('active')
        // $('.img div').eq(1).children('span').eq($(this).index()).addClass('.clear')
        // $('.img div').eq(2).children('span').eq($(this).index()).addClass('.clear')
    })
}
// 点击banner中的生活家跳转页面
$('.img div span:nth-child(1)').click(function(){
    window.location.href = "html/lifeHome.html";
})
// $('em').on('click',function(){
// 	$(this).addClass('active').siblings('em').removeClass('active')
// 	$('.img div').children('span').addClass('active').removeClass('clear')
// 	$('.img div').eq(0).children('span').eq($(this).index()).addClass('clear').removeClass('active')
// 	$('.img div').eq(1).children('span').eq($(this).index()).addClass('clear').removeClass('active')
// 	$('.img div').eq(2).children('span').eq($(this).index()).addClass('clear').removeClass('active')
// 	// $('.img div').eq(1).children('span').eq($(this).index()).addClass('.clear')
// 	// $('.img div').eq(2).children('span').eq($(this).index()).addClass('.clear')
// })
})

// $(function(){
//     var width = $('.img').width()/3;
//     for(var i = 0;i<3;i++){
//         $('.img span:nth-child('+(i+1)+')').each(function(j){
//             $(this).css("backgroundPosition",-width*j);
//         })
//     }
//     $(window).on('resize',function(){
//         console.log($('.img').width());
//         var width = $('.img').width()/3;
//         for(var i = 0;i<3;i++){
//             $('.img span:nth-child('+(i+1)+')').each(function(j){
//                 $(this).css("backgroundPosition",-width*j);
//             })
//         }
        
//     })
// })